<template>
  <div class="FooterContainer">
    <div class="box">
      <div class="row">
        <ul class="ula">
          <li><a href="#">关于我们</a> </li>
          <li><a href="#">用户隐私权政策</a></li>
          <li><a href="#">用户服务协议</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
        <div class="fonts">
          <span><img style="margin-right: 50px"  height="40" src="@/assets/footer/wx.jpg" ></span>
          <span><img height="40" src="@/assets/footer/电话.jpg" ></span>
          <p>Copyright © 2010-2022 南京爱一格网络科技有限公司 版权所有</p>
          <p>经营性许可证编号： 苏B2-20180515   苏网文〔2021〕4647-106号</p>
          <p>苏ICP备20036081号</p>
          <p>硅谷猛男大队第五小队</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Footer",
});

</script>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
* {
  list-style: none;
}
.FooterContainer{
  width: 100%;
}
a {
  text-decoration: none;
}
a:link {
  text-decoration: none;
}
.box {
  width: 100%;
  height: 300px;
  background-color: #221f23;
  position: static;
  bottom: 0;
  font-size: 14px;
}
.row {
  margin: 0 auto;
  height: 257px;
  background-color: #221f23;
}
.row .ula {
  padding: 24px 40px 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  justify-content: space-around;
}
.row .ula li {
  width: 100%;
  height: 20px;
  line-height: 20px;
  border-right: 1px solid #fff;
}
.row .ula li a {
  color: #b1b5c1;
  background-color: transparent;
}
.row .ula li:hover a {
  color: #f43b5a;
}
.row .ula li:last-child {
  border-right: none;
}
.fonts {
  color: #b1b5c1;
  text-align: center;
}
.fonts span {
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.fonts p {
  margin: 16px 0px;
}
</style>
